
    import React,{useState} from 'react';
    //useState可以让函数有 "状态"  减少了使用this
    const StateHook = ()=>{
        //数组结构语法 最终useState输出的结果是 [12,fn]
        //useState(1 状态的值， 2 一个变更状态的方法)
        const [num,setNum] = useState(12)
        const [name,setNum1] = useState('李白')

        //事件处理函数
        const handleClick = ()=>{
            setNum(num+1) // 每次设置的时候都要传入一个新的值
        }
        const handleClickJ = ()=>{
            if(num >=1 ){
                setNum(num-1)
            }
        }
        const handleClickB = ()=>{
            setNum1("宫本")
            console.log("aaaa");
        }
        return(
            <fieldset>
                <legend>StateHook</legend>
                <h1>数字:{num}</h1>
                <h1>{name}</h1>
                <button onClick ={handleClick}>点击加加</button>
                <button onClick ={handleClickJ}>点击减减</button>
                <button onClick ={handleClickB}>点击变身</button>
            </fieldset>
        )
    }

    export default StateHook